import { PlusOutlined } from '@ant-design/icons'
import {
  Row,
  Typography,
  Flex,
  Button,
  Col,
  Form,
  Input,
  Modal,
  Table,
  Switch,
  Divider,
  Radio,
  Select,
  message
} from 'antd'
import React, { useState, useEffect } from 'react'
import {
  accountAddAPI,
  accountDelAPI,
  accountListAPI,
  accountResetAPI
} from '../service/account'
import { sellerVerifyList } from '../service/seller'

function PrivilegeAccount() {
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [form] = Form.useForm()
  const [accountList, setAccountList] = useState([])
  const [pageNo, setPageNo] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  // 保存商家列表
  const [sellerList, setSellerList] = useState([])
  // 保存账号类型
  const [accountType, setAccountType] = useState(0)
  // 用于更新列表啊
  const [n, setN] = useState(0)
  useEffect(() => {
    ;(async () => {
      const res = await accountListAPI({ pageSize, pageNo })
      setAccountList(res.data.objects)
      console.log(res)
    })()
    // 查询所有的商家
    ;(async () => {
      const res = await sellerVerifyList({ pageSize: 1000, pageNo: 1 })
      console.log(res)
      setSellerList(res.data.objects)
    })()
  }, [pageNo, n])
  return (
    <>
      <Row className="info">
        <Col span={24}>
          <Flex justify={'space-between'}>
            <Typography.Title level={3}>信息管理</Typography.Title>
            <Button
              type="primary"
              icon={<PlusOutlined />}
              onClick={() => setIsModalOpen(true)}
            >
              新建账号
            </Button>
          </Flex>
        </Col>
      </Row>
      <Row className="container">
        <Col span={24}>
          <Form layout="inline" onFinish={async (values) => {}}>
            <Form.Item label="用户名" name="username">
              <Input />
            </Form.Item>
            <Form.Item label="手机号" name="phone">
              <Input />
            </Form.Item>
            <Form.Item label="商家" name="storename">
              <Input />
            </Form.Item>
            <Form.Item>
              <Button type="default" htmlType="reset">
                重置
              </Button>
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
            </Form.Item>
          </Form>
        </Col>
      </Row>
      <Row className="container">
        <Col span={24}>
          <Typography.Paragraph style={{ fontSize: 16 }}>
            账号列表
          </Typography.Paragraph>
        </Col>
        <Col span={24}>
          <Table
            pagination={{
              pageSize,
              onChange: (page) => {
                setPageNo(page)
              }
            }}
            rowKey={(record) => record.id}
            columns={[
              {
                title: '编号',
                dataIndex: 'id',
                key: 'id'
              },
              {
                title: '姓名',
                dataIndex: 'nickname',
                key: 'nickname'
              },
              {
                title: '商家',
                dataIndex: 'businessId',
                key: 'businessId'
              },
              {
                title: '用户类型',
                dataIndex: 'accountType',
                key: 'accountType',
                render: (_, record) =>
                  record.accountType === 0 ? <>平台</> : <>商家</>
              },
              {
                title: '手机号',
                dataIndex: 'accountPhone',
                key: 'accountPhone'
              },
              {
                title: '电子邮箱',
                dataIndex: 'email',
                key: 'email'
              },
              {
                title: '角色',
                key: 'role',
                render: (_, record) => '管理员'
              },
              {
                title: '状态',
                key: 'accountStatus',
                render: (_, record) => (
                  <Switch
                    defaultChecked={record.accountStatus === 0 ? true : false}
                  />
                )
              },
              {
                title: '操作',
                key: 'action',
                render: (_, record) => {
                  return (
                    <span className="op">
                      <a
                        onClick={() => {
                          setIsModalOpen(true)
                          form.setFieldsValue(record)
                        }}
                      >
                        编辑
                      </a>
                      <a
                        onClick={async () => {
                          const res = await accountDelAPI({ id: record.id })
                          console.log(res)
                          if (res.code === '0') {
                            message.success('删除成功')
                            setN(n + 1)
                          }
                        }}
                      >
                        删除
                      </a>
                      <a>分配角色</a>
                      <a
                        onClick={async () => {
                          const res = await accountResetAPI({ id: record.id })
                          console.log(res)
                          if (res.code === '0') {
                            message.success('密码重置成功')
                          }
                        }}
                      >
                        密码重置
                      </a>
                    </span>
                  )
                }
              }
            ]}
            dataSource={accountList}
          />
        </Col>
      </Row>
      <Modal
        title="新建账号"
        width={800}
        open={isModalOpen}
        onOk={() => {
          form.submit()
        }}
        onCancel={() => {
          setIsModalOpen(false)
        }}
        maskClosable={false}
        destroyOnClose
      >
        <Divider />
        <Form
          form={form}
          preserve={false}
          onFinish={async (values) => {
            console.log(values)
            const res = await accountAddAPI(values)
            console.log(res)
            if (res.code === '0') {
              message.success('新建账号成功')
              setIsModalOpen(false)
              form.resetFields()
              setN(n + 1)
            }
          }}
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 16 }}
        >
          <Form.Item label="账号类型" name="accountType" initialValue={0}>
            <Radio.Group
              onChange={(e) => {
                // 清空表单控件输入的值
                form.setFieldsValue({
                  accountPassword: '',
                  accountPhone: '',
                  businessId: '',
                  email: '',
                  nickname: ''
                })
                setAccountType(e.target.value)
              }}
            >
              <Radio value={0}>平台</Radio>
              <Radio value={1}>商家</Radio>
            </Radio.Group>
          </Form.Item>

          {accountType === 0 && (
            <>
              <Form.Item
                label="手机号码"
                name="accountPhone"
                rules={[
                  {
                    required: true,
                    message: '电话号码不能为空'
                  },
                  {
                    pattern: /^1[3-9]\d{9}$/,
                    message: '请输入正确的手机号码'
                  }
                ]}
              >
                <Input placeholder="请输入11位手机号" />
              </Form.Item>
              <Form.Item
                label="登录密码"
                name="accountPassword"
                rules={[
                  {
                    required: true,
                    message: '密码不能为空'
                  },
                  {
                    pattern: /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{8,20}$/,
                    message: '请输入8~20个字符且包含字母、数字至少一种'
                  }
                ]}
              >
                <Input.Password placeholder="请输入8~20个字符且包含字母、数字至少一种" />
              </Form.Item>
              <Form.Item
                label="用户名称"
                name="nickname"
                rules={[
                  {
                    required: true,
                    message: '用户名称不能为空'
                  },
                  {
                    pattern: /^.{1,15}$/,
                    message: '请输入15个字符以内的用户名'
                  }
                ]}
              >
                <Input placeholder="请输入15个字符以内的用户名" />
              </Form.Item>
              <Form.Item
                label="电子邮箱"
                name="email"
                rules={[
                  {
                    required: true,
                    message: '电子邮箱不能为空'
                  },
                  {
                    pattern:
                      /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
                    message: '请输入正确的电子邮箱'
                  }
                ]}
              >
                <Input placeholder="请输入电子邮箱" />
              </Form.Item>
              <Form.Item label="状态状态" name="accountStatus" initialValue={0}>
                <Radio.Group>
                  <Radio value={0}>启用</Radio>
                  <Radio value={1}>关闭</Radio>
                </Radio.Group>
              </Form.Item>
            </>
          )}
          {accountType === 1 && (
            <>
              <Form.Item
                label="归属商家"
                name="businessId"
                rules={[
                  {
                    required: true,
                    message: '商家名称不能为空'
                  }
                ]}
              >
                <Select
                  placeholder="请选择商家名称"
                  options={sellerList}
                  fieldNames={{ value: 'id', label: 'businessName' }}
                />
              </Form.Item>
              <Form.Item
                label="手机号码"
                name="accountPhone"
                rules={[
                  {
                    required: true,
                    message: '电话号码不能为空'
                  },
                  {
                    pattern: /^1[3-9]\d{9}$/,
                    message: '请输入正确的手机号码'
                  }
                ]}
              >
                <Input placeholder="请输入11位手机号" />
              </Form.Item>
              <Form.Item
                label="登录密码"
                name="accountPassword"
                rules={[
                  {
                    required: true,
                    message: '密码不能为空'
                  },
                  {
                    pattern: /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{8,20}$/,
                    message: '请输入8~20个字符且包含字母、数字至少一种'
                  }
                ]}
              >
                <Input.Password placeholder="请输入8~20个字符且包含字母、数字至少一种" />
              </Form.Item>
              <Form.Item
                label="用户名称"
                name="nickname"
                rules={[
                  {
                    required: true,
                    message: '用户名称不能为空'
                  },
                  {
                    pattern: /^.{1,15}$/,
                    message: '请输入15个字符以内的用户名'
                  }
                ]}
              >
                <Input placeholder="请输入15个字符以内的用户名" />
              </Form.Item>
              <Form.Item
                label="电子邮箱"
                name="email"
                rules={[
                  {
                    required: true,
                    message: '电子邮箱不能为空'
                  },
                  {
                    pattern:
                      /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
                    message: '请输入正确的电子邮箱'
                  }
                ]}
              >
                <Input placeholder="请输入电子邮箱" />
              </Form.Item>
              <Form.Item label="状态状态" name="accountStatus" initialValue={0}>
                <Radio.Group>
                  <Radio value={0}>启用</Radio>
                  <Radio value={1}>关闭</Radio>
                </Radio.Group>
              </Form.Item>
            </>
          )}
        </Form>
      </Modal>
    </>
  )
}

export default PrivilegeAccount
